```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude Chrome 扩展 - 智能浏览助手</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
        }
        .highlight-card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .highlight-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .section-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
        }
        .feature-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4.5rem;
            line-height: 0.65;
            margin: 0.1em 0.15em 0 0;
            font-weight: 700;
            color: #6366f1;
        }
        .scroll-fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .animate {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-5xl mx-auto">
            <div class="text-center">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">重新定义您的浏览体验</h1>
                <p class="text-xl md:text-2xl font-light max-w-3xl mx-auto mb-8">Claude Chrome 扩展 - 将AI智能直接带入您的浏览器</p>
                <div class="flex justify-center space-x-4">
                    <a href="https://claude.ai/chrome" class="bg-white text-indigo-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition duration-300 inline-flex items-center">
                        <i class="fas fa-download mr-2"></i> 立即安装
                    </a>
                    <a href="#features" class="border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:bg-opacity-10 transition duration-300">
                        探索功能
                    </a>
                </div>
            </div>
            <div class="mt-16 flex justify-center">
                <div class="relative w-full max-w-3xl rounded-xl overflow-hidden shadow-2xl">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1756806971403-3fd05823-2907-4688-afd1-3c7c8a84d267.png" alt="Claude Chrome 扩展截图" class="w-full h-auto">
                    <div class="absolute inset-0 bg-gradient-to-t from-indigo-900 to-transparent opacity-30"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Introduction Section -->
    <div class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-5xl mx-auto">
            <div class="mb-12 text-center">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">信息爆炸时代的智能解决方案</h2>
                <div class="w-24 h-1 bg-indigo-500 mx-auto"></div>
            </div>
            <p class="drop-cap text-lg text-gray-700 mb-8">
                在信息爆炸的今天，我们每天都需要处理海量的文本信息——阅读冗长的报告、筛选成堆的邮件、消化复杂的网络文章、总结会议纪要。传统的工作方式不仅效率低下，而且极易导致信息过载和认知疲劳。您是否曾希望有一个智能助手，能随时待命，帮您快速提炼网页核心观点、即时回答您基于当前页面的问题，甚至帮您草拟一封得体的电子邮件？
            </p>
            <p class="text-lg text-gray-700">
                <span class="font-semibold text-indigo-600">Claude Chrome 扩展程序</span> 正是为了解决这些痛点而生。它将强大的 AI 模型直接集成到您的浏览器中，让您无论在浏览任何网页时，都能一键调用 AI 的智慧，实现与数字世界前所未有的高效互动。
            </p>
        </div>
    </div>

    <!-- Problem Section -->
    <div class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
        <div class="max-w-5xl mx-auto">
            <div class="mb-12 text-center scroll-fade-in">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">它能解决什么问题？</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">在日常的网页浏览和在线工作中，我们常常遇到以下令人头疼的场景</p>
            </div>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="highlight-card bg-white p-8 rounded-xl scroll-fade-in">
                    <div class="flex items-start mb-4">
                        <div class="feature-icon rounded-full flex items-center justify-center text-white mr-4">
                            <i class="fas fa-brain text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-800 mb-2">信息过载与时间压力</h3>
                            <p class="text-gray-600">面对一篇数千字的行业分析报告或学术论文，我们往往没有足够的时间通读全文，但又担心错过关键信息。我们需要一种能快速"预消化"内容，并提炼出核心摘要的方法。</p>
                        </div>
                    </div>
                </div>
                <div class="highlight-card bg-white p-8 rounded-xl scroll-fade-in">
                    <div class="flex items-start mb-4">
                        <div class="feature-icon rounded-full flex items-center justify-center text-white mr-4">
                            <i class="fas fa-random text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-800 mb-2">上下文切换的效率损耗</h3>
                            <p class="text-gray-600">当我们在网页上阅读资料并需要撰写邮件或报告时，频繁地在浏览器标签页和写作应用之间来回切换，不仅打断思路，也浪费了大量时间。</p>
                        </div>
                    </div>
                </div>
                <div class="highlight-card bg-white p-8 rounded-xl scroll-fade-in">
                    <div class="flex items-start mb-4">
                        <div class="feature-icon rounded-full flex items-center justify-center text-white mr-4">
                            <i class="fas fa-question-circle text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-800 mb-2">即时性问题的解答需求</h3>
                            <p class="text-gray-600">在浏览技术文档或复杂概念的解释时，我们经常会遇到不理解的术语或段落。此时，我们不得不中断阅读，打开新的标签页去搜索，这个过程非常繁琐。</p>
                        </div>
                    </div>
                </div>
                <div class="highlight-card bg-white p-8 rounded-xl scroll-fade-in">
                    <div class="flex items-start mb-4">
                        <div class="feature-icon rounded-full flex items-center justify-center text-white mr-4">
                            <i class="fas fa-language text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-800 mb-2">跨语言的内容理解障碍</h3>
                            <p class="text-gray-600">对于需要阅读外语资料的用户来说，即使借助翻译工具，也可能因为文化和专业术语的差异而难以精准理解。</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-12 bg-indigo-50 border-l-4 border-indigo-500 p-4 rounded-r-lg scroll-fade-in">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-lightbulb text-indigo-500 text-xl mt-1 mr-3"></i>
                    </div>
                    <div>
                        <p class="text-indigo-800 font-medium">Claude Chrome 扩展程序就是来解决这些问题的。</p>
                        <p class="text-indigo-700">它将一个强大的对话式 AI 直接嵌入到您的浏览器侧边栏，使其成为您浏览体验的一部分。您无需离开当前页面，就能随时与 AI 互动，让它帮您处理当前页面上的文本内容，从而极大地提升了信息处理效率和专注度。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Section -->
    <div id="features" class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-5xl mx-auto">
            <div class="mb-12 text-center scroll-fade-in">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">核心功能概述</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">Claude Chrome 扩展的核心魅力在于其简洁而强大的功能集</p>
            </div>
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="scroll-fade-in">
                    <div class="flex items-start mb-6">
                        <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-comments text-indigo-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-800 mb-2">侧边栏即时对话</h3>
                            <p class="text-gray-600">这是该扩展最具标志性的功能。安装后，浏览器右侧会出现一个 Claude 图标，点击即可随时唤出对话侧边栏。您可以直接向 Claude 提问，它能够理解并回答您关于当前浏览页面的任何问题。</p>
                        </div>
                    </div>
                </div>
                <div class="scroll-fade-in">
                    <div class="flex items-start mb-6">
                        <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-file-alt text-indigo-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-800 mb-2">上下文感知摘要</h3>
                            <p class="text-gray-600">该扩展的核心能力之一是深度理解网页内容。它不仅仅是抓取关键词，而是能真正阅读并理解长篇文章、PDF文档或复杂的报告。</p>
                        </div>
                    </div>
                </div>
                <div class="scroll-fade-in">
                    <div class="flex items-start mb-6">
                        <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-edit text-indigo-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-800 mb-2">智能内容创作与编辑</h3>
                            <p class="text-gray-600">Claude 不仅是阅读助手，更是一位写作伴侣。当您在网页上选中一段文字时，可以右键点击，让 Claude 帮您改进措辞、修正语法、扩展内容，甚至是改变语气。</p>
                        </div>
                    </div>
                </div>
                <div class="scroll-fade-in">
                    <div class="flex items-start mb-6">
                        <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-bolt text-indigo-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-800 mb-2">快捷指令菜单</h3>
                            <p class="text-gray-600">为了进一步提升效率，该扩展内置了一系列预设的快捷指令。当您在任何网页的输入框中写作时，可以直接从菜单中选择"总结"、"翻译"、"释义"等操作。</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 scroll-fade-in">
                <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-file-pdf text-indigo-600 mr-3"></i> 强大的文档处理能力
                </h3>
                <p class="text-gray-600">
                    与其他一些仅能处理网页文本的工具不同，Claude 扩展可以直接读取和分析您在浏览器中打开的 PDF 文件。这意味着您可以上传一份研究报告或财务报表，然后直接在侧边栏向 Claude 提问关于这份文档的具体细节，例如"这份财报中提到的最大风险是什么？"或"请帮我找到关于市场增长预测的数据"。
                </p>
            </div>
        </div>
    </div>

    <!-- Use Cases Section -->
    <div class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
        <div class="max-w-5xl mx-auto">
            <div class="mb-12 text-center scroll-fade-in">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">典型使用场景</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">理论功能需要结合实际应用才能展现其价值</p>
            </div>
            <div class="grid gap-8">
                <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 scroll-fade-in">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-600 text-white rounded-full w-10 h-10 flex items-center justify-center mr-4">
                            <i class="fas fa-graduation-cap"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">场景一：学生与研究人员的学术研究</h3>
                    </div>
                    <div class="pl-14">
                        <p class="text-gray-600 mb-4">
                            <span class="font-semibold text-gray-800">问题：</span> 一位研究生正在为他的论文搜集资料，他打开了一篇长达 30 页的 PDF 学术论文。他需要在短时间内判断这篇文章是否与他的研究方向高度相关，并找出其中的核心论点和实验数据。
                        </p>
                        <p class="text-gray-600">
                            <span class="font-semibold text-gray-800">解决方案：</span> 他使用 Claude Chrome 扩展打开这篇 PDF。首先，他在侧边栏输入指令："请用三句话总结这篇论文的核心贡献。" Claude 迅速给出了摘要，让他判断出文章的相关性。接着，他继续提问："请列出这篇论文使用的主要研究方法和关键数据发现。" Claude 从复杂的文本中提取出精确信息，并以列表形式呈现。整个过程不到五分钟，远比他自己通读全文要高效得多。
                        </p>
                    </div>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 scroll-fade-in">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-600 text-white rounded-full w-10 h-10 flex items-center justify-center mr-4">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">场景二：市场分析师的竞品调研</h3>
                    </div>
                    <div class="pl-14">
                        <p class="text-gray-600 mb-4">
                            <span class="font-semibold text-gray-800">问题：</span> 一位市场分析师正在浏览竞争对手的官方网站和最新的产品发布新闻。她需要快速了解对手新产品的功能亮点、市场定位和用户反馈。
                        </p>
                        <p class="text-gray-600">
                            <span class="font-semibold text-gray-800">解决方案：</span> 在浏览产品介绍页面时，她唤出 Claude 侧边栏，指令道："基于当前页面的内容，分析这款产品的目标用户和主要卖点。" Claude 会生成一份简洁的分析报告。随后，她打开一篇关于该产品评测的文章，让 Claude 总结其中的正面和负面评价。通过这种方式，她无需花费数小时阅读大量文本，就能快速构建起对竞品的全面认知。
                        </p>
                    </div>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 scroll-fade-in">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-600 text-white rounded-full w-10 h-10 flex items-center justify-center mr-4">
                            <i class="fas fa-code"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">场景三：程序员的日常开发工作</h3>
                    </div>
                    <div class="pl-14">
                        <p class="text-gray-600 mb-4">
                            <span class="font-semibold text-gray-800">问题：</span> 一位软件工程师在浏览技术论坛（如 Stack Overflow）或官方开发文档时，遇到了一段复杂的代码示例或一个不熟悉的技术概念。
                        </p>
                        <p class="text-gray-600">
                            <span class="font-semibold text-gray-800">解决方案：</span> 他可以直接选中那段代码，在侧边栏询问 Claude："请解释这段代码的每一行是做什么的，并说明它在什么场景下使用。" Claude 会提供逐行注释和清晰的解释。如果遇到一个技术术语，他也可以直接提问，即时获得通俗易懂的解答，无需中断编程思路去另外搜索。
                        </p>
                        <div class="bg-indigo-50 p-4 rounded-lg mt-4">
                            <p class="text-indigo-700 font-medium flex items-center">
                                <i class="fas fa-question-circle text-indigo-600 mr-2"></i> 这如何改变您学习和解决技术难题的方式？
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Advantages Section -->
    <div class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-5xl mx-auto">
            <div class="mb-12 text-center scroll-fade-in">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">优势与特色</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">与其他同类AI浏览器扩展相比的独特优势</p>
            </div>
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="scroll-fade-in">
                    <div class="bg-white p-6 rounded-xl border border-gray-200 h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-indigo-100 text-indigo-600 p-2 rounded-lg mr-4">
                                <i class="fas fa-brain"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">更强的上下文理解能力</h3>
                        </div>
                        <p class="text-gray-600">
                            Claude 模型以其强大的长文本处理和推理能力著称。这意味着在处理长篇报告、复杂文档时，它能更准确地把握全文的逻辑和细微差别，提供的摘要和回答也更为精准。
                        </p>
                    </div>
                </div>
                <div class="scroll-fade-in">
                    <div class="bg-white p-6 rounded-xl border border-gray-200 h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-indigo-100 text-indigo-600 p-2 rounded-lg mr-4">
                                <i class="fas fa-link"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">与 Claude.ai 生态的无缝集成</h3>
                        </div>
                        <p class="text-gray-600">
                            如果您已经是 Claude.ai 网站的用户，该扩展能提供一致的体验。您的对话历史会在不同设备间同步，方便您随时回顾和继续之前的讨论。
                        </p>
                    </div>
                </div>
                <div class="scroll-fade-in">
                    <div class="bg-white p-6 rounded-xl border border-gray-200 h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-indigo-100 text-indigo-600 p-2 rounded-lg mr-4">
                                <i class="fas fa-lock"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">注重隐私和安全</h3>
                        </div>
                        <p class="text-gray-600">
                            Anthropic 公司一直强调其对 AI 安全和伦理的重视。相比一些数据使用策略模糊的工具，Claude 在处理用户数据时承诺更高的透明度和安全性，这对于处理敏感工作内容的用户来说至关重要。
                        </p>
                    </div>
                </div>
                <div class="scroll-fade-in">
                    <div class="bg-white p-6 rounded-xl border border-gray-200 h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-indigo-100 text-indigo-600 p-2 rounded-lg mr-4">
                                <i class="fas fa-paint-brush"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">简洁直观的用户界面</h3>
                        </div>
                        <p class="text-gray-600">
                            该扩展的设计非常克制和现代，没有冗余的功能和复杂的设置。侧边栏的设计既能提供强大的功能，又不会过分干扰用户的正常浏览，实现了功能性与用户体验的良好平衡。
                        </p>
                    </div>
                </div>
            </div>
            <div class="bg-amber-50 border-l-4 border-amber-400 p-4 rounded-r-lg scroll-fade-in">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-triangle text-amber-500 text-xl mt-1 mr-3"></i>
                    </div>
                    <div>
                        <h4 class="text-amber-800 font-bold mb-2">局限性思考</h4>
                        <p class="text-amber-700">
                            当然，它也存在一些潜在的局限性。首先，其性能高度依赖于网络连接和 Anthropic 服务器的负载情况，在高峰时段可能会有延迟。其次，尽管模型强大，但对于高度专业化或极其冷门的领域，其知识的深度和准确性仍有可能不及领域专家。最后，免费版本的使用存在一定的限制，重度用户可能需要升级到付费计划。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pricing Section -->
    <div class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
        <div class="max-w-5xl mx-auto">
            <div class="mb-12 text-center scroll-fade-in">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">使用门槛与成本</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">灵活的使用方案满足不同需求</p>
            </div>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-sm scroll-fade-in">
                    <div class="text-center mb-6">
                        <h3 class="text-2xl font-bold text-gray-800 mb-2">免费版 (Claude Free)</h3>
                        <p class="text-4xl font-bold text-indigo-600 mb-2">$0<span class="text-lg text-gray-500">/月</span></p>
                    </div>
                    <ul class="space-y-3 text-gray-600 mb-8">
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
                            <span>基础摘要和问答功能</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
                            <span>动态消息数量限制</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
                            <span>适合轻度用户日常使用</span>
                        </li>
                    </ul>
                    <a href="https://claude.ai/chrome" class="block w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-3 px-4 rounded-lg text-center transition duration-300">
                        开始使用
                    </a>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-lg border-2 border-indigo-200 relative scroll-fade-in">
                    <div class="absolute top-0 right-0 bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">
                        推荐
                    </div>
                    <div class="text-center mb-6">
                        <h3 class="text-2xl font-bold text-gray-800 mb-2">专业版 (Claude Pro)</h3>
                        <p class="text-4xl font-bold text-indigo-600 mb-2">$20<span class="text-lg text-gray-500">/月</span></p>
                    </div>
                    <ul class="space-y-3 text-gray-600 mb-8">
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
                            <span>比免费版多至少5倍使用量</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
                            <span>高峰时段优先访问权</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
                            <span>抢先体验最新功能</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
                            <span>适合重度用户和专业需求</span>
                        </li>
                    </ul>
                    <a href="https://claude.ai/chrome" class="block w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-4 rounded-lg text-center transition duration-300">
                        升级账户
                    </a>
                </div>
            </div>
            <div class="mt-8 text-center text-gray-500">
                <p>使用该扩展程序需要一个 Claude 账户。您可以通过 Google 账户、Apple 账户或电子邮箱免费注册。</p>
            </div>
        </div>
    </div>

    <!-- Installation Guide -->
    <div class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-5xl mx-auto">
            <div class="mb-12 text-center scroll-fade-in">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">上手指南</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">只需几个简单步骤，即刻体验智能浏览</p>
            </div>
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="scroll-fade-in">
                    <div class="bg-white p-6 rounded-xl border border-gray-200 h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-indigo-100 text-indigo-600 p-3 rounded-full w-12 h-12 flex items-center justify-center mr-4 font-bold">1</div>
                            <h3 class="text-xl font-bold text-gray-800">访问 Chrome 网上应用店</h3>
                        </div>
                        <p class="text-gray-600 pl-16">
                            在您的 Chrome 浏览器中，打开 Chrome 网上应用店。
                        </p>
                    </div>
                </div>
                <div class="scroll-fade-in">
                    <div class="bg-white p-6 rounded-xl border border-gray-200 h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-indigo-100 text-indigo-600 p-3 rounded-full w-12 h-12 flex items-center justify-center mr-4 font-bold">2</div>
                            <h3 class="text-xl font-bold text-gray-800">搜索扩展程序</h3>
                        </div>
                        <p class="text-gray-600 pl-16">
                            在搜索框中输入"Claude"，找到由 Anthropic, PBC 开发的官方扩展程序。
                        </p>
                    </div>
                </div>
                <div class="scroll-fade-in">
                    <div class="bg-white p-6 rounded-xl border border-gray-200 h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-indigo-100 text-indigo-600 p-3 rounded-full w-12 h-12 flex items-center justify-center mr-4 font-bold">3</div>
                            <h3 class="text-xl font-bold text-gray-800">安装扩展</h3>
                        </div>
                        <p class="text-gray-600 pl-16">
                            点击"添加到 Chrome"按钮，并在弹出的确认窗口中点击"添加扩展程序"。
                        </p>
                    </div>
                </div>
                <div class="scroll-fade-in">
                    <div class="bg-white p-6 rounded-xl border border-gray-200 h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-indigo-100 text-indigo-600 p-3 rounded-full w-12 h-12 flex items-center justify-center mr-4 font-bold">4</div>
                            <h3 class="text-xl font-bold text-gray-800">固定到工具栏</h3>
                        </div>
                        <p class="text-gray-600 pl-16">
                            安装完成后，建议点击浏览器右上角的拼图图标（扩展程序），找到 Claude 并点击图钉图标，将其固定在工具栏上，方便随时访问。
                        </p>
                    </div>
                </div>
                <div class="scroll-fade-in">
                    <div class="bg-white p-6 rounded-xl border border-gray-200 h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-indigo-100 text-indigo-600 p-3 rounded-full w-12 h-12 flex items-center justify-center mr-4 font-bold">5</div>
                            <h3 class="text-xl font-bold text-gray-800">登录账户</h3>
                        </div>
                        <p class="text-gray-600 pl-16">
                            点击工具栏上的 Claude 图标，会弹出登录页面。使用您的 Google、Apple 或邮箱账户登录（如果还没有账户，可以快速免费注册一个）。
                        </p>
                    </div>
                </div>
                <div class="scroll-fade-in">
                    <div class="bg-white p-6 rounded-xl border border-gray-200 h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-indigo-100 text-indigo-600 p-3 rounded-full w-12 h-12 flex items-center justify-center mr-4 font-bold">6</div>
                            <h3 class="text-xl font-bold text-gray-800">开始使用</h3>
                        </div>
                        <p class="text-gray-600 pl-16">
                            登录后，您就可以在任何网页上点击 Claude 图标唤出侧边栏，开始您的智能浏览之旅了。尝试让它总结您正在阅读的第一篇文章，感受 AI 带来的效率飞跃吧！
                        </p>
                    </div>
                </div>
            </div>
            <div class="text-center mt-12 scroll-fade-in">
                <a href="https://claude.ai/chrome" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-8 rounded-full transition duration-300">
                    <i class="fas fa-download mr-2"></i> 立即安装 Claude Chrome 扩展
                </a>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });

        // Scroll animation
        document.addEventListener('DOMContentLoaded', function() {
            const scrollElements = document.querySelectorAll('.scroll-fade-in');
            
            const elementInView = (el, dividend = 1) => {
                const elementTop = el.getBoundingClientRect().top;
                return (
                    elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend
                );
            };
            
            const displayScrollElement = (element) => {
                element.classList.add('animate');
            };
            
            const handleScrollAnimation = () => {
                scrollElements.forEach((el) => {
                    if (elementInView(el, 1.25)) {
                        displayScrollElement(el);
                    }
                });
            };
            
            // Initialize by checking elements already in view
            handleScrollAnimation();
            
            // Add scroll event listener
            window.addEventListener('scroll', () => {
                handleScrollAnimation();
            });
        });
    </script>
</body>
</html>
```